<template>
  <div class="identify_basis_detail">
    <div class="top">
      <back-button />
    </div>
    <div class="bottom">
      <div class="left">
        <el-carousel
          ref="carousel"
          :autoplay="false"
          indicator-position="none"
          arrow="always"
          height="550px"
          @change="onchange"
        >
          <el-carousel-item
            v-for="(item, index) in gen"
            v-if="routeId == 1"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in jingshang"
            v-if="routeId == 2"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in jingxia"
            v-if="routeId == 3"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in jingleixing"
            v-if="routeId == 4"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in jingshengzhang"
            v-if="routeId == 5"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in biantaiye"
            v-if="routeId == 6"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in fuye"
            v-if="routeId == 7"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in maobei"
            v-if="routeId == 8"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in yeji"
            v-if="routeId == 9"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in yejian"
            v-if="routeId == 10"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in yexing"
            v-if="routeId == 11"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in yexu"
            v-if="routeId == 12"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in yeyuan"
            v-if="routeId == 13"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in yezhuosheng"
            v-if="routeId == 14"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in huaxu"
            v-if="routeId == 15"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in huaguan"
            v-if="routeId == 16"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in huajiegou"
            v-if="routeId == 17"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in ganguo"
            v-if="routeId == 18"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
          <el-carousel-item
            v-for="(item, index) in rouguo"
            v-if="routeId == 19"
            :key="index"
          >
            <el-image :src="item.url" fit="fill" />
          <!-- <p class="title">{{item.name}}</p> -->
          </el-carousel-item>
        </el-carousel>
        <div class="imgs">
          <span
            v-for="(item, index) in gen"
            v-if="routeId == 1"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in jingshang"
            v-if="routeId == 2"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in jingxia"
            v-if="routeId == 3"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in jingleixing"
            v-if="routeId == 4"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in jingshengzhang"
            v-if="routeId == 5"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in biantaiye"
            v-if="routeId == 6"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in fuye"
            v-if="routeId == 7"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in maobei"
            v-if="routeId == 8"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in yeji"
            v-if="routeId == 9"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in yejian"
            v-if="routeId == 10"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in yexing"
            v-if="routeId == 11"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in yexu"
            v-if="routeId == 12"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in yeyuan"
            v-if="routeId == 13"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in yezhuosheng"
            v-if="routeId == 14"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in huaxu"
            v-if="routeId == 15"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in huaguan"
            v-if="routeId == 16"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in huajiegou"
            v-if="routeId == 17"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in ganguo"
            v-if="routeId == 18"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
          <span
            v-for="(item, index) in rouguo"
            v-if="routeId == 19"
            :key="index"
            @click="selectImg(index, item)"
          >
            <el-image
              :class="{ activeImg: active == index }"
              style="width: 150px; height: 150px"
              :src="item.url"
              fit="fill"
            />
          <!-- <p class="title">{{item.name}}</p> -->
          </span>
        </div>
      </div>
      <div class="right">
        <el-divider
          direction="vertical"
          content-position="left"
          class="relative-plant"
        />
        <div class="lists">
          <div style="font-size: 21px">相关植物</div>
          <el-button
            v-for="(item, index) in lists"
            :key="index"
            type="text"
            @click="goDetail(item.id)"
          >
            {{ item.chinese_name }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BackButton from '@/components/BackButton/index.vue'
import { getList } from '@/api/plantList'
export default {
  components: {
    BackButton
  },
  data() {
    return {
      // setActiveItem: 0,
      gen: [
        { url: require('./img/根的类型_18.png'), name: '快跟' },
        { url: require('./img/根的类型_05.png'), name: '须根' },
        { url: require('./img/根的类型_07.png'), name: '不定根' },
        { url: require('./img/根的类型_09.png'), name: '主根' },
        { url: require('./img/根的类型_15.png'), name: '呼吸根' },
        { url: require('./img/根的类型_16.png'), name: '板根' },
        { url: require('./img/根的类型_17.png'), name: '块根' },
        { url: require('./img/根的类型_03.png'), name: '支柱根' }
      ],
      jingshang: [
        { url: require('./img/地上茎的变态_03.png'), name: '茎卷须' },
        { url: require('./img/地上茎的变态_04.png'), name: '叶状茎' },
        { url: require('./img/地上茎的变态_06.png'), name: '茎刺' },
        { url: require('./img/地上茎的变态_07.png'), name: '皮刺' }
      ],
      jingxia: [
        { url: require('./img/根状茎.png'), name: '根状茎' },
        { url: require('./img/块茎.png'), name: '块茎' },
        { url: require('./img/麟茎.png'), name: '麟茎' },
        { url: require('./img/球茎.png'), name: '球茎' }
      ],
      jingleixing: [
        { url: require('./img/草本.png'), name: '草本' },
        { url: require('./img/灌木.png'), name: '灌木' },
        { url: require('./img/肉质茎.png'), name: '肉质茎' },
        { url: require('./img/亚灌木.png'), name: '亚灌木' },
        { url: require('./img/乔木.png'), name: '乔木' }
      ],
      jingshengzhang: [
        { url: require('./img/缠绕藤本.png'), name: '缠绕藤本' },
        { url: require('./img/攀缘藤本.png'), name: '攀缘藤本' },
        { url: require('./img/平卧茎.png'), name: '平卧茎' },
        { url: require('./img/匍匐茎.png'), name: '匍匐茎' },
        { url: require('./img/斜生茎.png'), name: '斜生茎' },
        { url: require('./img/直立茎.png'), name: '直立茎' }
      ],
      biantaiye: [
        { url: require('./img/捕虫叶.png'), name: '捕虫叶' },
        { url: require('./img/刺叶.png'), name: '刺叶' },
        { url: require('./img/卷须叶.png'), name: '卷须叶' },
        { url: require('./img/麟叶.png'), name: '麟叶' }
      ],
      fuye: [
        { url: require('./img/单身复叶.png'), name: '单身复叶' },
        { url: require('./img/单叶.png'), name: '单叶' },
        { url: require('./img/二回羽状复叶.png'), name: '二回羽状复叶' },
        { url: require('./img/偶数羽状复叶.png'), name: '偶数羽状复叶' },
        { url: require('./img/奇数羽状复叶.png'), name: '奇数羽状复叶' },
        { url: require('./img/三回羽状复叶.png'), name: '三回羽状复叶' },
        { url: require('./img/羽状三出复叶.png'), name: '羽状三出复叶' },
        { url: require('./img/掌状复叶.png'), name: '掌状复叶' },
        { url: require('./img/掌状三出复叶.png'), name: '掌状三出复叶' }
      ],
      maobei: [
        { url: require('./img/糙毛.png'), name: '糙毛' },
        { url: require('./img/短柔毛.png'), name: '短柔毛' },
        { url: require('./img/绒毛.png'), name: '绒毛' },
        { url: require('./img/疏毛.png'), name: '疏毛' },
        { url: require('./img/腺毛.png'), name: '腺毛' },
        { url: require('./img/星状毛.png'), name: '星状毛' },
        { url: require('./img/长柔毛.png'), name: '长柔毛' }
      ],
      yeji: [
        { url: require('./img/抱茎.png'), name: '抱茎' },
        { url: require('./img/盾状.png'), name: '盾状' },
        { url: require('./img/贯穿.png'), name: '贯穿' },
        { url: require('./img/戟行.png'), name: '戟行' },
        { url: require('./img/渐狭.png'), name: '渐狭' },
        { url: require('./img/箭形.png'), name: '箭形' },
        { url: require('./img/偏斜.png'), name: '偏斜' },
        { url: require('./img/平戟.png'), name: '平戟' },
        { url: require('./img/锲形.png'), name: '锲形' },
        { url: require('./img/舌状.png'), name: '舌状' },
        { url: require('./img/下延.png'), name: '下延' },
        { url: require('./img/心形.png'), name: '心形' },
        { url: require('./img/有耳.png'), name: '有耳' },
        { url: require('./img/圆钝.png'), name: '圆钝' },
        { url: require('./img/叶基圆形.png'), name: '叶基圆形' }
      ],
      yejian: [
        { url: require('./img/凹缺.png'), name: '凹缺' },
        { url: require('./img/刺齿.png'), name: '刺齿' },
        { url: require('./img/刺尖.png'), name: '刺尖' },
        { url: require('./img/短尖.png'), name: '短尖' },
        { url: require('./img/急尖.png'), name: '急尖' },
        { url: require('./img/戟行.png'), name: '戟行' },
        { url: require('./img/渐尖.png'), name: '渐尖' },
        { url: require('./img/锐尖.png'), name: '锐尖' },
        { url: require('./img/凸尖.png'), name: '凸尖' },
        { url: require('./img/突尖.png'), name: '突尖' },
        { url: require('./img/微凹.png'), name: '微凹' },
        { url: require('./img/尾尖.png'), name: '尾尖' },
        { url: require('./img/圆钝.png'), name: '圆钝' },
        { url: require('./img/叶尖圆形.png'), name: '叶尖圆形' }
      ],
      yexing: [
        { url: require('./img/倒卵行.png'), name: '倒卵行' },
        { url: require('./img/倒心形.png'), name: '倒心形' },
        { url: require('./img/戟行.png'), name: '戟行' },
        { url: require('./img/渐尖.png'), name: '渐尖' },
        { url: require('./img/镰状.png'), name: '镰状' },
        { url: require('./img/菱形.png'), name: '菱形' },
        { url: require('./img/卵形.png'), name: '卵形' },
        { url: require('./img/卵圆形.png'), name: '卵圆形' },
        { url: require('./img/批针形.png'), name: '批针形' },
        { url: require('./img/锲形.png'), name: '锲形' },
        { url: require('./img/三角形.png'), name: '三角形' },
        { url: require('./img/扇形.png'), name: '扇形' },
        { url: require('./img/肾行.png'), name: '肾行' },
        { url: require('./img/匙形.png'), name: '匙形' },
        { url: require('./img/椭圆形.png'), name: '椭圆形' },
        { url: require('./img/尾尖.png'), name: '尾尖' },
        { url: require('./img/线形.png'), name: '线形' },
        { url: require('./img/心形.png'), name: '心形' },
        { url: require('./img/羽状裂.png'), name: '羽状裂' },
        { url: require('./img/叶形圆形.png'), name: '叶形圆形' },
        { url: require('./img/掌状.png'), name: '掌状' },
        { url: require('./img/针形.png'), name: '针形' }
      ],
      yexu: [
        { url: require('./img/簇生.png'), name: '簇生' },
        { url: require('./img/对生.png'), name: '对生' },
        { url: require('./img/互生.png'), name: '互生' },
        { url: require('./img/轮生.png'), name: '轮生' }
      ],
      yeyuan: [
        { url: require('./img/波状.png'), name: '波状' },
        { url: require('./img/不规则锯齿.png'), name: '不规则锯齿' },
        { url: require('./img/刺齿.png'), name: '刺齿' },
        { url: require('./img/睫毛状.png'), name: '睫毛状' },
        { url: require('./img/锯齿.png'), name: '锯齿' },
        { url: require('./img/浅裂.png'), name: '浅裂' },
        { url: require('./img/全缘.png'), name: '全缘' },
        { url: require('./img/细锯齿.png'), name: '细锯齿' },
        { url: require('./img/细圆锯齿.png'), name: '细圆锯齿' },
        { url: require('./img/牙齿.png'), name: '牙齿' },
        { url: require('./img/圆锯齿.png'), name: '圆锯齿' },
        { url: require('./img/掌状.png'), name: '掌状' },
        { url: require('./img/重锯齿.png'), name: '重锯齿' }
      ],
      yezhuosheng: [
        { url: require('./img/抱茎叶.png'), name: '抱茎叶' },
        { url: require('./img/盾叶.png'), name: '盾叶' },
        { url: require('./img/托叶.png'), name: '托叶' },
        { url: require('./img/托叶鞘.png'), name: '托叶鞘' },
        { url: require('./img/无柄.png'), name: '无柄' },
        { url: require('./img/叶鞘.png'), name: '叶鞘' },
        { url: require('./img/叶舌.png'), name: '叶舌' },
        { url: require('./img/有柄.png'), name: '有柄' }
      ],
      huaxu: [
        { url: require('./img/复伞行花序.png'), name: '复伞行花序' },
        { url: require('./img/聚伞花序.png'), name: '聚伞花序' },
        { url: require('./img/聚伞圆锥花序.png'), name: '聚伞圆锥花序' },
        { url: require('./img/轮伞花序.png'), name: '轮伞花序' },
        { url: require('./img/柔荑花序.png'), name: '柔荑花序' },
        { url: require('./img/肉穗花序.png'), name: '肉穗花序' },
        { url: require('./img/伞房花序.png'), name: '伞房花序' },
        { url: require('./img/伞行花序.png'), name: '伞行花序' },
        { url: require('./img/穗状花序.png'), name: '穗状花序' },
        { url: require('./img/头状花序.png'), name: '头状花序' },
        { url: require('./img/圆锥花序.png'), name: '圆锥花序' },
        { url: require('./img/总状花序.png'), name: '总状花序' }
      ],
      huaguan: [
        { url: require('./img/唇形.png'), name: '唇形' },
        { url: require('./img/碟形.png'), name: '碟形' },
        { url: require('./img/佛焰苞.png'), name: '佛焰苞' },
        { url: require('./img/副花冠.png'), name: '副花冠' },
        { url: require('./img/高脚杯形.png'), name: '高脚杯形' },
        { url: require('./img/花被.png'), name: '花被' },
        { url: require('./img/花萼&花瓣.png'), name: '花萼&花瓣' },
        { url: require('./img/假面状.png'), name: '假面状' },
        { url: require('./img/距状.png'), name: '距状' },
        { url: require('./img/盔行.png'), name: '盔行' },
        { url: require('./img/龙骨瓣.png'), name: '龙骨瓣' },
        { url: require('./img/漏斗形.png'), name: '漏斗形' },
        { url: require('./img/轮状.png'), name: '轮状' },
        { url: require('./img/囊状..png'), name: '囊状1' },
        { url: require('./img/囊状.png'), name: '囊状2' },
        { url: require('./img/舌状花.png'), name: '舌状花' },
        { url: require('./img/十字形.png'), name: '十字形' },
        { url: require('./img/坛状.png'), name: '坛状' },
        { url: require('./img/筒状.png'), name: '筒状' },
        { url: require('./img/钟形.png'), name: '钟形' }
      ],
      huajiegou: [
        { url: require('./img/花 结构.png'), name: '花 结构' },
        { url: require('./img/花 结构-01.png'), name: '花 结构' }
      ],
      ganguo: [
        { url: require('./img/翅果.png'), name: '翅果' },
        { url: require('./img/短角果.png'), name: '短角果' },
        { url: require('./img/蓇葖果.png'), name: '蓇葖果' },
        { url: require('./img/荚果.png'), name: '荚果' },
        { url: require('./img/坚果.png'), name: '坚果' },
        { url: require('./img/节荚果.png'), name: '节荚果' },
        { url: require('./img/瘦果.png'), name: '瘦果' },
        { url: require('./img/蒴果.png'), name: '蒴果' },
        { url: require('./img/颖果.png'), name: '颖果' },
        { url: require('./img/长角果.png'), name: '长角果' }
      ],
      rouguo: [
        { url: require('./img/柑果.png'), name: '柑果' },
        { url: require('./img/核果.png'), name: '核果' },
        { url: require('./img/瓠果.png'), name: '瓠果' },
        { url: require('./img/浆果.png'), name: '浆果' },
        { url: require('./img/聚合果.png'), name: '聚合果' },
        { url: require('./img/聚花果.png'), name: '聚花果' },
        { url: require('./img/梨果.png'), name: '梨果' }
      ],
      lists: [],
      active: 0,
      routeId: null,
      map: {
        1: 'gen',
        2: 'jingshang',
        3: 'jingxia',
        4: 'jingleixing',
        5: 'jingshengzhang',
        6: 'biantaiye',
        7: 'fuye',
        8: 'maobei',
        9: 'yeji',
        10: 'yejian',
        11: 'yexing',
        12: 'yexu',
        13: 'yeyuan',
        14: 'yezhuosheng',
        15: 'huaxu',
        16: 'huaguan',
        17: 'huajiegou',
        18: 'ganguo',
        19: 'rouguo'
      },
      currentList: []
    }
  },
  mounted() {
    const currentList = this[this.map[this.$route.params.id]]
    this.currentList = currentList
    const item = currentList[0]
    this.getNames(item.name)
    this.routeId = this.$route.params.id
  },
  methods: {
    onchange(index) {
      this.active = this.$refs.carousel.activeIndex
      this.getNames(this.currentList[this.active].name)
    },
    selectImg(index, item) {
      this.active = index
      this.$refs.carousel.setActiveItem(index)
      this.getNames(item.name)
    },
    goDetail(id) {
      this.$router.push(`/plantlib/detail/${id}`)
    },
    async getNames(value) {
      const data = {
        page_num: this.currentPage,
        page_size: 5,
        conditions: [
          {
            key: 'identify_key_words',
            operator: 'like',
            value
          }
        ],
        order_info: {
          key: 'create_time',
          order: 'desc'
        }
      }
      const res = await getList(data)
      if (res.code == 200 && res.data) {
        this.lists = res.data
      }
    }
  }
}
</script>
<style scoped>
.el-divider >>> .el-divider__text {
  font-size: 18px;
  color: rgb(64, 158, 255);
}
.el-divider--vertical {
  height: 100%;
}
</style>
<style lang="scss">
.identify_basis_detail {
  // display: flex;
  // padding: 20px;
  .top {

  }
  .bottom {
    display: flex;
    padding: 20px;
  }
  .left {
    width: 75%;
  }
  .right {
    display: flex;
    flex: 1;
  }
  .el-carousel {
    // width: 100%;
    max-width: 80%;
    margin: 0 auto;
    .el-carousel__arrow {
      width: 50px;
      height: 50px;
    }
    .el-image {
      display: block;
      margin: 0 auto;
      height: 400px;
      width: 400px;
    }
  }
  .imgs {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    overflow: auto;
    img {
      margin-left: 1px;
    }
    .el-image {
      cursor: pointer;
      margin-right: 10px;
      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
  .title {
    text-align: center;
  }
  .lists {
    // display: flex;
    // justify-content: center;
    flex: 1;
    button {
      font-size: 20px;
    }
  }
  .activeImg {
    border: 1px solid #dcdfe6;
  }
}
</style>
